<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>♡ 达叔の故事♡ </title>
    <link rel="stylesheet" href="../public/bootstrap.css">
    <link rel="stylesheet" href="../08/main.css">
</head>

<body>
    <header>
        <nav id="menu" class="navbar navbar-expand-lg navbar-light fixed-top shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="../public/images/可爱小语~.png" alt="♡ 达叔の故事♡ ">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                        </li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                达叔漫画╰(*°▽°*)
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">子不语</a>
                                <a class="dropdown-item" href="#">长歌行</a>
                                <a class="dropdown-item" href="#">拾遗录</a>
                                <a class="dropdown-item" href="#">步天歌</a>
                                <a class="dropdown-item" href="#">达叔画集</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">其他</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">达叔生活(ฅ´ω`ฅ)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">与达叔记(,,• ₃ •,,)♥</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="子不语" aria-label="Search">
                        <button class="btn btn-outline-sousuo my-2 my-sm-0" type="submit">搜索 (•̀ᴗ•́)و ̑̑</button>
                    </form>
                    <!-- <button class="btn btn-outline-danger my-2 my-sm-0 animated infinite pulse">支持我们</button> -->
                </div>
            </div>
        </nav>
    </header>
    <main>
        <section id=slide class="hero">
            <div id="carouselExampleCaptions" class="carousel slide container" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>

                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <a href="detail.html"><img src="../public/images/小长歌 拾遗录.jpg" class="d-block w-100"
                                alt="..."></a></div>
                    <div class="carousel-caption  d-md-block">
                        <h3>拾 遗 录</h3>
                        <p>讲述小长歌她身边的几个人物的故事</p>
                    </div>
                    </a>
                </div>
            </div>
            <div class="carousel-item">
                <div class="carousel-item-content">
                    <div class="mbr-overlay">
                        <a href=""><img src="../public/images/长歌行2.jpeg" class="d-block w-100" alt="..."></a>
                    </div>

                    <div class="carousel-caption  d-md-block">
                        <h3>长 歌 行</h3>
                        <p>拔剑起长歌</p>
                    </div>
                </div>
            </div>

            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
            </div>
        </section>
        <section id="recent-events" class="container p-3">
            <h3 class="text-center animated fadeInDown delay-1s">漫画简介</h3>
            <div class="row animated fadeInUp delay-2s mb-5 pb-3">
                <div class="col-md-3">
                    <div class="img">
                        <img class="img-fluid" src="../public/images/20140129160131_xQkTC.thumb.700_0.jpeg" alt="子不语"
                            class="img-fluid">
                    </div>
                </div>
                <div class="col-md-6 event-info">
                    <h4>子不语</h4>
                    <ul class="list-unstyled text-info">
                        <li><i class="fa fa-calendar" aria-hidden="true"></i>目前三卷（黑白）</li>
                        <li><i class="fa fa-map-pin" aria-hidden="true"></i>故事内容</li>
                        <li><i class="fa fa-location-arrow" aria-hidden="true"></i>子不语怪力乱神</li>
                    </ul>
                    <p>春雨惊春清谷天，夏满芒夏暑相连，秋处露秋寒霜降，冬雪雪冬小大寒。</p>
                    <p>关于麟趾镇的岁月，伴随着小语的到来，扯开了重重帷幕。</p>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">子不语漫画</button>
                </div>
            </div>
            <div class="row animated fadeInUp delay-3s mb-5 pb-3">
                <div class="col-md-3">
                    <img src="../public/images/长歌1.jpeg" alt="长歌行" class="img-fluid">
                </div>
                <div class="col event-info">
                    <h4>长歌行</h4>
                    <ul class="list-unstyled text-info">
                        <li><i class="fa fa-calendar" aria-hidden="true"></i>目前十一卷（黑白）</li>
                        <li><i class="fa fa-map-pin" aria-hidden="true"></i>故事内容</li>
                        <li><i class="fa fa-location-arrow" aria-hidden="true"></i>拔剑起长歌</li>
                    </ul>
                    <p>唐高祖武德九年六月初四庚申日，太子李建成和四皇子李元吉在玄武门为二皇子李世民所刺杀，史称[玄武门之变]。[玄武门]后，李建成的女儿，被封为永宁公主的李长歌，逃出皇宫，女扮男装，隐瞒身份流落民间，寻找机会替父报仇……
                    </p>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">长歌行漫画</button>
                </div>
            </div>
            <div class="row animated fadeInUp delay-1s mb-5 pb-3">
                <div class="col-md-3">
                    <img src="../public/images/img-d24314b3caef734bf0c9a500a4fb98ed.jpg" alt="拾遗录" class="img-fluid">
                </div>
                <div class="col event-info">
                    <h4>拾遗录</h4>
                    <ul class="list-unstyled text-info">
                        <li><i class="fa fa-calendar" aria-hidden="true"></i>目前一卷完结（《长歌行》延伸作）（彩绘）</li>
                        <li><i class="fa fa-map-pin" aria-hidden="true"></i>故事内容</li>
                        <li><i class="fa fa-location-arrow" aria-hidden="true"></i>描绘大唐契阔</li>
                    </ul>
                    <p>星河倒卷，前路漫漫。愿随鲲鹏起，长风浩荡几万里。</p>
                    <p>浩浩大唐，沧海拾遗。这里收录的是李长歌、阿史那隼、司徒郎朗等人在《长歌行》之外的人生。恍如浮光掠影，让人足以瞥见他们人生里的交错邂逅、物喜己悲、执着于遗恨……</p>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">拾遗录漫画</button>
                </div>
            </div>
        </section>
        <section id="member" class="my-5">
            <h2 class="h2 text-center">夏达 最爱的漫画家</h2>
            <p class="display-4 text-center title-bg">
                the best caricaturist
            </p>
            <div class="row mt-5">
                <div class="col-md-4">The concern was: How should our church associate with those who are born once
                    again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
                    motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
                    some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
                    the front door of the neighborhood church be approximately the very same dimension as the door to
                    the global body of Christ?</div>
                <div class="col-md-4">The concern was: How should our church associate with those who are born once
                    again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
                    motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
                    some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
                    the front door of the neighborhood church be approximately the very same dimension as the door to
                    the global body of Christ?</div>
                <div class="col-md-4">The concern was: How should our church associate with those who are born once
                    again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
                    motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
                    some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways</div>
            </div>

        </section>
    </main>
    <footer>
        <section class="container-fluid contact p-5">
            <div class="row">
                <div class="col-lg-4 text-center">
                    <h4>微博指路：夏达</h4>
                    <img src="../public/images/IMG_20171203_162921.png" alt="达叔微博" class="img-fluid">
                </div>
                <div class="col-lg-4">
                    <h4>我爱达叔</h4>
                    <ul class="list-unstyled">
                        <li><i class="fa fa-map-marker"></i>品读达叔的漫画~</li>
                        <li><i class="fa fa-phone" aria-hidden="true"></i>520-520-520-520</li>
                        <li><i class="fa fa-paper-plane" aria-hidden="true"></i>我的邮箱：845902547@qq.com</li>
                        <li><i class="fa fa-globe" aria-hidden="true"></i>微博网址</li>
                    </ul>
                </div>

                <div class="col-lg-4">
                    <h4>❥</h4>
                    <ul class="list-unstyled list-colums">
                        <li><i class="fa fa-link" aria-hidden="true"></i>愿达叔越来越好</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>520-520520520</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>我会永远支持您</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>买爆您的漫画</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>想看到您越来越多的作品</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>07-595700</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>超喜欢您的漫画！！</li>
                        <li><i class="fa fa-link" aria-hidden="true"></i>超级无敌喜欢！！</li>
                    </ul>
                </div>
            </div>
        </section>
        <section class="container-fluid copyright">
            <p class="text-center">© Copyright 2020 - <span><a href="#">来自@北奈柰子的编辑</a></span> - All Rights Reserved</p>
        </section>
        </main>

        <footer>

        </footer>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>

</html>